var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');

module.exports = {
  mode: 'development', // 工作模式
  entry: './src/js/app.js', // 入口
  output: { // 输出
    path: path.resolve(__dirname, 'build'),
    filename: 'js/app.js'
  },
  module: { // loaders
    rules: [
      // 配置解析css文件
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      // 解析并打包css文件中的图片
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: [{
          loader: 'file-loader',
          options: {
            outputPath: 'imgs',
            name: '[hash:10].[ext]'
          }
        }]
      },
      // 处理css兼容性问题
      {
        loader: "postcss-loader",
        options: {
          postcssOptions: {
            plugins: [
              [
                "postcss-preset-env",
                {
                  // Options
                },
              ],
            ],
          },
        },
      },
    ]
  },
  plugins: [ // 插件
    new HtmlWebpackPlugin({ // 生成一个打包后的html文件，html文件模板参考 template属性的值来生成
      template: './src/index.html' // 参考模板
    })
  ],
  // 开发时服务器
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    compress: true,
    port: 9000,
    open: true
  },
};